<template>
  <div style="background: #f8f9fb;width: 100%;padding-bottom: 90px;">
    <div style="display: flex;">
      <div class="dlTit" :style="idx == 0 ? 'color:#333333;font-weight: bold;' : ''" @click="changeIdx(0)">我的资料</div>
      <div class="dlTit" :style="idx == 1 ? 'color:#333333;font-weight: bold;' : ''" @click="changeIdx(1)">宣传码</div>
      <div class="dlTit" :style="idx == 2 ? 'color:#333333;font-weight: bold;' : ''" @click="changeIdx(2)">宣传海报</div>
      <!-- <div class="dlTit" :style="idx == 3?'color:#333333;font-weight: bold;':''" @click="changeIdx(3)">遇识爱授权</div> -->
    </div>
    <div style="margin-left: 40px;">
      <div class="dlCont">
        <div class="add_box" v-show="idx == 0">
          <div v-if="form.avatar" style="padding-left: 100px;padding-bottom: 34px;">
            <div style="font-size: 18px;color: #333333;margin-bottom: 16px;">头像</div>

            <img style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" :src="$staticURL + form.avatar"
              class="uploadELImg" alt="图片加载失败">

          </div>
          <el-form :model="form" label-width="auto" :label-position="'left'">
            <el-form-item label="代理名称：">
              <el-input v-model="form.name" :disabled="showEdit"></el-input>
            </el-form-item>
            <el-form-item label="代理级别：">
              <el-input :disabled="showEditCC">
                <el-select slot="prepend" v-model="form.level" :disabled="showEditCC" placeholder="请选择">
                  <el-option v-for="item in optionsLevel" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="详细地址：">
              <el-input v-model="form.addressDetail" :disabled="showEdit"></el-input>
            </el-form-item>
            <el-form-item label="代理城市：">
              <el-input :disabled="showEditCC" style="width: 500px;">
                <div slot="prepend">
                  <el-select v-model="province" :disabled="showEditCC" placeholder="请选择省" style="margin-right: 20px;">
                    <el-option v-for="item in Area" :key="item.value" :label="item.label" :value="item">
                    </el-option>
                  </el-select>
                  <el-select v-model="city" :disabled="showEditCC" placeholder="请选择市">
                    <el-option v-for="item in cityQuery" :key="item.value" :label="item.label" :value="item">
                    </el-option>
                  </el-select>
                  <el-select v-show="form.level == 2" v-model="area" :disabled="showEditCC" placeholder="请选择区">
                    <el-option v-for="item in areaQuery" :key="item.value" :label="item.label" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="支付宝账号：">
              <el-input v-model="form.type" :disabled="showEdit"></el-input>
            </el-form-item> -->
            <el-form-item label="联系人名称：">
              <el-input v-model="form.contactName" :disabled="showEdit"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="form.contactPhone" :disabled="showEdit"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="form.contactEmail" :disabled="showEdit"></el-input>
            </el-form-item>

            <el-form-item label="营业执照：" style="max-width: 100%;flex-direction: column;">
              <img style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" :src="$staticURL + form.licenseUrl"
                alt="图片加载失败" class="uploadELImg">
            </el-form-item>
            <el-form-item label="法人身份证正面：" style="max-width: 100%;flex-direction: column;">
              <img style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" :src="$staticURL + form.idcardFront"
                alt="图片加载失败" class="uploadELImg">
            </el-form-item>
            <el-form-item label="身份证反面" style="max-width: 100%;flex-direction: column;">
              <img style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" :src="$staticURL + form.idcardBack"
                alt="图片加载失败" class="uploadELImg">
            </el-form-item>
          </el-form>
          <!-- <div v-if="!showEdit"
            style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 30px;">
            <div class="agree_box">
              <el-checkbox v-model="checked" style="margin-right:4px;"></el-checkbox>
              同意<span @click="openUrl('https://yushiai.com.cn/userAgreement?_id=6')">《广告法》</span>和<span
                @click="openUrl('https://yushiai.com.cn/privacyPolicy')">《隐私政策》</span>
            </div>
            <div style="text-align: center;margin-top: 20px;" @click="updateAdvertisementUserMes">
              <el-button class="add_btn" type="primary" color="#10a4aa">提交</el-button>
            </div>
          </div> -->

        </div>

        <div v-show="idx == 1" style="display: flex;align-items: center;flex-direction: column;padding: 30px;">
          <div class="txt-mm">我的宣传码</div>
          <!-- {{ QRCodeUrl }} -->
          <img class="img-mm" :src="$baseURL + QRCodeUrl" />
          <div class="imgBtn" style="width: 260px;" @click="adis($baseURL + QRCodeUrl)">下载</div>
          <div style="width: 260px;text-align: center;margin-top:20px;font-size: 20px;">我的邀请码：{{ QRCode }}</div>
        </div>

        <div v-show="idx == 2">
          <!-- <div class="imgDL_item">
            <img v-for="item in 9" :key="item" src="https://www.yushiai.com.cn/static/pic/2011268229.jpg" alt=""
              class="imgDL" @click="showImg" />
          </div> -->
          <div class="imgDL_item">
            <div v-for="item in qrList" :key="item.id" @click="showImg(item.imgUrl)">
              <img v-if="item.imgUrl" :src="item.imgUrl" alt="分享图片" class="imgDL">
              <div v-else style="position: relative" :id="'ref' + item.id">
                <!-- <img src="https://www.yushiai.com.cn/static/pic/2011268229.jpg" class="imgDL" > -->
                <img :src="item.qrBimg" class="imgDL">
                <div :id="'qrcode' + item.id" class="qrcode" :style="item.qrStyle"></div>
              </div>
            </div>
          </div>
          <!-- <div style="display: flex;align-items: center;justify-content: center;padding-bottom: 50px;">
            <div class="imgBtn" @click="downImg">全部下载</div>
          </div> -->
          <!-- <div style="font-weight: bold;font-size: 20px;margin-left: 30px;">唯一码：</div>
          <div id="qrcodeWY" class="qrWY" @click="showImgWY(canvas2URL)"></div> -->
        </div>

        <div v-show="idx == 3" style="display: flex;align-items: center;flex-direction: column;padding: 30px;">
          <img class="img-sq" src="@/assets/img/ad-sq.png" />
          <div class="imgBtn" style="width: 450px;">下载</div>
        </div>
        <el-dialog :visible="visibleImgDLWY" @close="visibleImgDLWY = false" width="400px">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img :src="imgUrlWY" alt="" style="width:192px;height: 192px;" />
            <div style="display: flex;align-items: center;justify-content: center;padding-top: 30px;">
              <div class="imgBtn" style="width: 300px;" @click="downOneImg(imgUrlWY)">下载</div>
            </div>
          </div>
        </el-dialog>
        <el-dialog :visible="visibleImgDL" @close="visibleImgDL = false" width="700px">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img :src="imgUrl" alt="" style="width: 646px;height: 354px;" />
            <div style="display: flex;align-items: center;justify-content: center;padding-top: 30px;">
              <div class="imgBtn" style="width: 300px;" @click="downOneImg(imgUrl)">下载</div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import JSZip from 'jszip'
import {
  saveAs
} from 'file-saver'

import {
  qrcanvas
} from 'qrcanvas'
import html2canvas from 'html2canvas'
// import JSZip from "@/utils/jszip.js"
// import FileSaver from "file-saver"
export default {
  name: 'AdvertiserInformation',
  data() {
    return {
      QRCodeUrl: '',
      QRCode: '',
      imageTX: '',

      imgUrl: '',
      optionsLevel: [],
      optionsLevel1: [{
        value: 1,
        label: '市级'
      }],
      optionsLevel2: [{
        value: 2,
        label: '区县级'
      }],

      qrList: [

        {
          id: 2,
          imgUrl: '',
          qrStyle: {
            top: '140px',
            left: '150px'
          },
          qrBimg: require('@/assets/img/qr/2.png')
        },
        {
          id: 4,
          imgUrl: '',
          qrStyle: {
            top: '80px',
            left: '70px'
          },
          qrBimg: require('@/assets/img/qr/4.png')
        },

        {
          id: 6,
          imgUrl: '',
          qrStyle: {
            top: '10px',
            left: '280px'
          },
          qrBimg: require('@/assets/img/qr/6.png')
        },
        {
          id: 7,
          imgUrl: '',
          qrStyle: {
            top: '135px',
            left: '10px'
          },
          qrBimg: require('@/assets/img/qr/7.png')
        },
        {
          id: 8,
          imgUrl: '',
          qrStyle: {
            top: '75px',
            left: '230px'
          },
          qrBimg: require('@/assets/img/qr/8.png')
        },
        // {
        //   id: 9,
        //   imgUrl: '',
        //   qrStyle: {
        //     top: '115px',
        //     left: '66px'
        //   },
        //   qrBimg: require('@/assets/img/qr/9.png')
        // }
      ],

      checked: false,
      imageUrl: '',
      imageUrlBack: '',
      imageUrlFront: '',
      showEdit: false,
      visibleImgDL: false,
      idx: 0,
      form: {
        userName: '',
        password: '',
        addressDetail: "",
        advertisementUserId: 0,
        city: "",
        contactEmail: "",
        contactName: "",
        contactPhone: "",
        idcardBack: "",
        idcardFront: "",
        level: 0,
        licenseUrl: "",
        name: "",
        avatar: ''

      },
      aaa: true,
      Area: [],
      cityQuery: [],
      areaQuery: [],
      province: "",
      city: '',
      area: "",

      advertisementUserMes: '',
      licenseUrl: "",
      idcardBack: "",
      idcardFront: "",
      finish: true,

      cityForm: '',
      provinceForm: '',
      areaForm: '',

      canvas2URL: '',
      visibleImgDLWY: false,
      imgUrlWY: '',

      showEditCC: false,
    }
  },
  created() {
    this.Area = require('@/utils/city.json')
    console.log('this.Area', this.Area)
  },
  mounted() {
    this.getUserExtensionQRCode()
    this.getUserInviteCode()
    let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))
    this.advertisementUserMes = advertisementUserMes
    console.log('advertisementUserMes', advertisementUserMes)
    this.form.advertisementUserId = advertisementUserMes.advertisementUserId
    this.form.name = advertisementUserMes.name
    this.form.addressDetail = advertisementUserMes.addressDetail
    this.form.contactEmail = advertisementUserMes.contactEmail
    this.form.contactName = advertisementUserMes.contactName
    this.form.contactPhone = advertisementUserMes.contactPhone
    this.form.level = advertisementUserMes.level
    this.form.avatar = advertisementUserMes.avatar
    this.form.licenseUrl = advertisementUserMes.licenseUrl
    this.form.idcardBack = advertisementUserMes.idcardBack
    this.form.idcardFront = advertisementUserMes.idcardFront

    this.licenseUrl = advertisementUserMes.licenseUrl
    this.idcardBack = advertisementUserMes.idcardBack
    this.idcardFront = advertisementUserMes.idcardFront
    if (advertisementUserMes.city) {
      this.showEditCC = true
    }
    if (advertisementUserMes.level == 1) {
      this.optionsLevel = this.optionsLevel1
      this.province = advertisementUserMes.city.toString().split('/')[0]
      this.city = advertisementUserMes.city.toString().split('/')[1]
      this.provinceForm = advertisementUserMes.city.toString().split('/')[0]
      this.cityForm = advertisementUserMes.city.toString().split('/')[1]
    } else if (advertisementUserMes.level == 2) {
      this.optionsLevel = this.optionsLevel2
      this.province = advertisementUserMes.city.toString().split('/')[0]
      this.city = advertisementUserMes.city.toString().split('/')[1]
      this.area = advertisementUserMes.city.toString().split('/')[2]
      this.provinceForm = advertisementUserMes.city.toString().split('/')[0]
      this.cityForm = advertisementUserMes.city.toString().split('/')[1]
      this.areaForm = advertisementUserMes.city.toString().split('/')[2]
    }
  },
  computed: {
    headers() {
      return {
        session_token: localStorage.getItem("adv_session_token"),
        // session_token: '',
      };
    },

  },
  watch: {
    // 监听省级
    province: function (newValue) {
      this.cityQuery = []
      this.areaQuery = []
      this.Area.forEach((item) => {
        if (newValue.label === item.label) {
          this.cityQuery = item.children
          this.city = item.children[0]
          this.provinceForm = newValue.label
          // console.log('city', this.cityQuery)
        }
      })
    },
    // 监听市级
    city: function (newValue) {
      this.areaQuery = []
      if (!this.showEdit) {
        this.area = ""
      }
      this.cityQuery.forEach((item) => {
        if (newValue.label === item.label) {
          this.areaQuery = item.children
          this.cityForm = newValue.label
          // console.log('area', this.areaQuery)
        }
      })
    },
    area: function (newValue) {
      console.log(newValue)
      if (this.showEdit) {
        this.areaForm = newValue
      } else {
        this.areaForm = newValue.label
      }
    },
    idx(n, o) {
      if (n == 2 && this.aaa) {
        let that = this;
        that.finish = false
        that.appSrc = "http://h5.yushiai.com.cn/pages_home/download?userId=" + this.advertisementUserMes.userId;
        that.$nextTick(function () {
          //生成二维码
          var canvas1 = qrcanvas({
            data: decodeURIComponent(that.appSrc),
            size: 32,
            cellSize: 1
          });

          // var canvas2 = qrcanvas({
          //   data: decodeURIComponent(that.appSrc),
          //   size: 32,
          //   cellSize: 3
          // });
          // document.getElementById("qrcodeWY").innerHTML = '';
          // document.getElementById('qrcodeWY').appendChild(canvas2);

          //合成分享图
          // setTimeout(() => {
          //   html2canvas((document.getElementById("qrcodeWY")), {
          //     width: 96,
          //     height: 96,
          //     scale: 3,
          //   }).then(function(canvas) {
          //     that.canvas2URL = canvas.toDataURL("image/png");
          //   });
          // }, 100)

          var i = -1;

          function nextStep() {
            i++;
            if (i >= that.qrList.length) {
              // that.handleSelectionChange()
              that.finish = true
              return;
            }
            let id = that.qrList[i].id
            console.log(id)
            console.log(document.getElementById("qrcode" + id))
            document.getElementById("qrcode" + id).innerHTML = '';
            document.getElementById('qrcode' + id).appendChild(canvas1);
            //合成分享图
            setTimeout(() => {
              // that.$refs.box.innerHTML = 'ref' + i
              // console.log(that.$refs.box)
              html2canvas((document.getElementById("ref" + id)), {
                width: 323,
                height: 177,
                // scale: window.devicePixelRatio || 1,
                scale: 3,
              }).then(function (canvas) {
                let dataURL = canvas.toDataURL("image/png");
                // that.imgUrl = dataURL;
                // console.log(dataURL)
                const index = that.qrList.findIndex(item => item.id === id);
                that.qrList[index].imgUrl = dataURL
                nextStep();
              });
            }, 100)
          }
          nextStep();
          // document.getElementById("qrcode7").innerHTML = '';
          // document.getElementById('qrcode7').appendChild(canvas1);
          // html2canvas((that.$refs.box1), {
          //   width: 323,
          //   height: 177
          // }).then(function(canvas) {
          //   let dataURL = canvas.toDataURL("image/png");
          //   that.qrList[1].imgUrl = dataURL;
          //   // console.log(dataURL)
          // });
        });
        this.aaa = false
      } else {
        console.log(this.qrList)
      }
    }
  },
  methods: {
    async getUserExtensionQRCode() {
      console.log('getUserExtensionQRCode77777777', JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId)
      let res = await this.$API.members.getUserExtensionQRCode({
        advertisementId: JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId
      })
      console.log(this.form, '^^^^^^^^^^^');
      this.QRCodeUrl = res.data.QRCodeUrl
    },
    adis(ITEM){
console.log(ITEM);
    },
    async getUserInviteCode() {
      let res = await this.$API.members.getUserInviteCode({
        userId: JSON.parse(localStorage.getItem('advertisementUserMes')).userId
      })
      console.log('getUserInviteCode', res.msg)
      this.QRCode = res.msg
    },


    openUrl(url) {
      window.open(url)
    },
    async getAdvertisementUserMes() {
      console.log('代理商信息',)
      let res = await this.$API.members.getAdvertisementUserMes({
        advertisementUserId: JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId
      })
      localStorage.setItem('advertisementUserMes', JSON.stringify(res.data))
      let advertisementUserMes = res.data
      this.advertisementUserMes = advertisementUserMes
      console.log('99999', advertisementUserMes)
      this.imageTX = advertisementUserMes.avatar
      this.form.avatar = JSON.parse(localStorage.getItem('advertisementUserMes')).advertisementUserId.avatar
      console.log(this.form.avatar, 'avatar');
      this.form.advertisementUserId = advertisementUserMes.advertisementUserId
      this.form.name = advertisementUserMes.name
      this.form.addressDetail = advertisementUserMes.addressDetail
      this.form.contactEmail = advertisementUserMes.contactEmail
      this.form.contactName = advertisementUserMes.contactName
      this.form.contactPhone = advertisementUserMes.contactPhone
      this.form.level = advertisementUserMes.level

      this.form.licenseUrl = advertisementUserMes.licenseUrl
      this.form.idcardBack = advertisementUserMes.idcardBack
      this.form.idcardFront = advertisementUserMes.idcardFront

      this.licenseUrl = advertisementUserMes.licenseUrl
      this.idcardBack = advertisementUserMes.idcardBack
      this.idcardFront = advertisementUserMes.idcardFront
      if (advertisementUserMes.city) {
        this.showEditCC = true
      }
      if (advertisementUserMes.level == 1) {
        this.province = advertisementUserMes.city.toString().split('/')[0]
        this.city = advertisementUserMes.city.toString().split('/')[1]
        this.provinceForm = advertisementUserMes.city.toString().split('/')[0]
        this.cityForm = advertisementUserMes.city.toString().split('/')[1]
      } else if (advertisementUserMes.level == 2) {
        this.province = advertisementUserMes.city.toString().split('/')[0]
        this.city = advertisementUserMes.city.toString().split('/')[1]
        this.area = advertisementUserMes.city.toString().split('/')[2]
        this.provinceForm = advertisementUserMes.city.toString().split('/')[0]
        this.cityForm = advertisementUserMes.city.toString().split('/')[1]
        this.areaForm = advertisementUserMes.city.toString().split('/')[2]
      }
      // this.showEdit = true
    },
    back() {
      this.showEdit = true
      this.licenseUrl = this.advertisementUserMes.licenseUrl
      this.idcardBack = this.advertisementUserMes.idcardBack
      this.idcardFront = this.advertisementUserMes.idcardFront

      this.form.name = this.advertisementUserMes.name
      this.form.addressDetail = this.advertisementUserMes.addressDetail
      this.form.contactEmail = this.advertisementUserMes.contactEmail
      this.form.contactName = this.advertisementUserMes.contactName
      this.form.contactPhone = this.advertisementUserMes.contactPhone
      this.form.level = this.advertisementUserMes.level

      if (this.advertisementUserMes.level == 1) {
        this.province = this.advertisementUserMes.city.toString().split('/')[0]
        this.city = this.advertisementUserMes.city.toString().split('/')[1]
      } else if (this.advertisementUserMes.level == 2) {
        this.province = this.advertisementUserMes.city.toString().split('/')[0]
        this.city = this.advertisementUserMes.city.toString().split('/')[1]
        this.area = this.advertisementUserMes.city.toString().split('/')[2]
      }
    },
    changeIdx(i) {
      if (!this.finish) {
        this.$message('宣传海报二维码生成中...')
        return;
      }
      this.idx = i
    },
    async updateAdvertisementUserMes() {
      if (!this.checked) {
        this.$message.error('请先阅读同意协议！')
        return;
      }
      // console.log(this.form)
      // if (this.form.level == 1) {
      //   this.form.city = this.province.label + '/' + this.city.label
      // } else if (this.form.level == 2) {
      //   this.form.city = this.province.label + '/' + this.city.label + '/' + this.area.label
      // }
      if (this.form.level == 1) {
        this.form.city = this.provinceForm + '/' + this.cityForm
      } else if (this.form.level == 2) {
        this.form.city = this.provinceForm + '/' + this.cityForm + '/' + this.areaForm
      }
      // console.log(this.form.city)
      // return;
      let res = await this.$API.members.updateAdvertisementUserMes(this.form)
      console.log('修改代理商信息', res)
      if (res.code == 200) {
        this.$message.success('代理商信息修改成功')
        this.getAdvertisementUserMes()
        this.checked = false
      } else {
        this.$message(res.msg)
      }
    },
    handleAvatarSuccessFront(res, file) {
      console.log(res, file)
      this.imageUrlFront = URL.createObjectURL(file.raw);
      console.log(this.imageUrlFront, '---');
      if (res.code == 200) {
        this.idcardFront = res.data.imgageUrl
        this.form.idcardFront = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    handleAvatarSuccessBack(res, file) {
      console.log(res, file)
      this.imageUrlBack = URL.createObjectURL(file.raw);
      if (res.code == 200) {
        this.idcardBack = res.data.imgageUrl
        this.form.idcardBack = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code == 200) {
        this.licenseUrl = res.data.imgageUrl
        this.form.licenseUrl = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    // handleTXSuccess(res, file) {
    //   console.log(res, file)
    //   // this.imageTX = URL.createObjectURL(file.raw);
    //   if (res.code == 200) {
    //     this.imageTX = res.data.imgageUrl
    //     this.form.avatar = res.data.imgageUrl
    //   } else {
    //     this.$message(res.msg)
    //   }
    // },
    downOneImg(imgUrl) {
      console.log(imgUrl,'8');
      //imgUrl是base64字符串 带base64头的
      if (window.navigator.msSaveOrOpenBlob) {
        // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
        var bstr = atob(imgUrl.split(",")[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr]);
        window.navigator.msSaveOrOpenBlob(blob, "遇识爱" + "." + "png");
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement("a");
        a.href = imgUrl;
        a.setAttribute("download", "遇识爱");
        a.click();
      }
      // window.open('https://www.yushiai.com.cn/static/pic/2011268229.jpg')
    },
    showImg(imgUrl) {
      this.visibleImgDL = true
      this.imgUrl = imgUrl
    },
    showImgWY(imgUrl) {
      console.log(imgUrl,'1231');
      this.visibleImgDLWY = true
      this.imgUrlWY = imgUrl
    },
    handleSelectionChange() {
      let val = this.qrList
      this.imageList = []

      for (let i = 0; i < val.length; i++) {

        let obj = {}

        obj.url = val[i].imgUrl

        obj.name = "遇识爱" + val[i].id

        this.imageList.push(obj)

      }
      console.log(this.imageList)
    },
    downImg() {
      return;
      // 创建一个 jsZip 实例

      const zip = new JSZip()

      // 遍历图片数组，将每张图片添加进 zip 包

      this.imageList.forEach((imgBase64, index) => {

        // base64 格式图片转 blob 对象

        // const imgUrl = imgBase64.toString().split(',')[1]

        const imgUrl = imgBase64.url

        const imgBlob = atob(imgUrl)

        const imgArray = []

        for (let i = 0; i < imgBlob.length; i++) {

          imgArray.push(imgBlob.charCodeAt(i))

        }

        const imgFile = new Blob([new Uint8Array(imgArray)], {
          type: 'image/png'
        })

        // 将图片添加进 zip 包

        // zip.file(`image${index + 1}.png`, imgFile)

        zip.file(imgBase64.name, imgFile)

      })

      // 生成 zip 文件并下载

      zip.generateAsync({
        type: 'blob'
      }).then(content => {

        saveAs(content, 'img.zip')

      })
    },
    downImg1() {
      var blogTitle = '打包图片';
      var zip = new JSZip();
      var imgs = zip.folder(blogTitle);
      var baseList = [];
      // 要下载图片的url
      var arr = ['https://www.yushiai.com.cn/static/pic/2011268229.jpg',
        'https://www.yushiai.com.cn/static/pic/2011268229.jpg',
        'https://www.yushiai.com.cn/static/pic/2011268229.jpg'
      ]; //这里数组内的图片,可以换成自己的图片url地址!
      // 下载后图片的文件名，个数应与arr对应
      var imgNameList = ['图片1', '图片2', '图片3']; //这里的数组内的图片名字,可以换成自己对应的!如果是后端返回的,那么
      //就可以从后端返回的数据里面取到图片名字,push到数组内!

      for (var i = 0; i < arr.length; i++) {
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous');

        image.onload = function () {
          let canvas = document.createElement('canvas');
          canvas.width = image.width;
          canvas.height = image.height;

          let context = canvas.getContext('2d');
          context.drawImage(image, 0, 0, image.width, image.height);

          let url = canvas.toDataURL(); // 得到图片的base64编码数据
          canvas.toDataURL('image/png');

          baseList.push(url.substring(22)); // 去掉base64编码前的 data:image/png;base64,
          if (baseList.length === arr.length && baseList.length > 0) {
            for (let k = 0; k < baseList.length; k++) {
              imgs.file(imgNameList[k] + '.png', baseList[k], {
                base64: true
              })
            }
            zip.generateAsync({
              type: 'blob'
            }).then(function (content) {
              // see FileSaver.js
              FileSaver.saveAs(content, blogTitle + '.zip');
            });
          }

        };
        image.src = arr[i];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dlTit {
  font-size: 30px;
  // font-weight: 500;
  color: #666666;
  margin: 30px 40px;
}

.dlCont {
  width: fit-content;
  max-width: 1269px;
  // height: 809px;
  background: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  position: relative;
}

.dlCont .add_box {
  // background: #fff;
  // box-shadow: 0 1px 4px 0 #0000003f;
  width: 100%;
  min-height: 700px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;
}

.agree_box span {
  color: #1B4187;
  cursor: pointer
}

.dlCont .add_box ::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* justify-content: space-between; */
}

.dlCont .add_box ::v-deep .el-form .el-form-item {
  max-width: 33%;
  // min-width: 340px;
  min-width: 520px;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.dlCont .add_box ::v-deep .el-form .el-form-item__label {
  font-size: 18px;
  font-weight: normal;
  color: #333;
}

.dlCont .add_box ::v-deep .el-form .el-upload {
  margin: 10px 0;
  margin-right: 20px;
  flex-direction: column;
}

.dlCont .add_box ::v-deep .el-input {
  width: 240px;
}

.dlCont .add_box ::v-deep .el-input-group__prepend {
  border: none !important;
  background-color: transparent !important;
}

.dlCont .add_box ::v-deep .el-input .el-input__inner {
  border: none !important;
  box-shadow: none !important;
  padding: 0px; //前边边距去掉
  background-color: transparent;

  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.dlCont .add_box div ::v-deep .el-input .el-input__wrapper {
  background: #eee;
  border: unset;
  box-shadow: unset;
}

.uploadEL ::v-deep .el-upload .el-upload-dragger {
  width: 260px !important;
  height: 146px !important;
}

.uploadELImg {
  width: 260px;
  height: 146px;
}

.dlCont .add_box .agree_box ::v-deep .el-checkbox__inner {
  width: 15px !important;
  height: 15px !important;
}

.dlCont .add_box .agree_box ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(255, 104, 178) !important;
  border-color: rgb(255, 104, 178) !important;
}


.imgDL_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px;
}

.imgDL_item:after {
  content: '';
  width: 323px;
}

.imgDL {
  width: 323px;
  height: 177px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.imgBtn {
  width: 468px;
  height: 54px;
  border-radius: 5px;
  background: #FF68B2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #FFFFFF;
}

.btnEE {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #000000;
  cursor: pointer;
}

.qrcode {
  position: absolute;
  top: 60px;
  left: 185px;
}

.qrWY {
  position: relative;
  top: -20px;
  left: 200px;
}


.img-tx {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.uploadTX ::v-deep .el-upload .el-upload-dragger {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
}




.txt-mm {
  font-size: 18px;
  color: #3D3D3D;
}

.img-mm {
  width: 214px;
  height: 214px;
  margin: 20px 0;
}

.img-sq {
  width: 390px;
  height: 560px;
  margin-bottom: 20px;
}
</style>
